<html>
<head>
  <title>OIC2.0</title>
	<!-- YAHOO UI Utilities Lib, you will need to replace this with the path to your YUI utilities file -->
	<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/utilities_2.1.0.js"></script>
<%= javascript_include_tag :defaults %>
	<%= javascript_include_tag "http://www.yui-ext.com/deploy/yui-ext/yui-ext.js" %>
   <%= javascript_include_tag "http://www.yui-ext.com/deploy/yui-ext/examples/grid/PropsGrid.js" %>
   
   <%= javascript_tag(content=
	"function addText(request) {
		if(request.responseText!='0x332')
		document.getElementById(\"center1\").innerHTML += (request.responseText);
		hold(false)
		}

	function hold(value) {
		document.getElementById(\"west\").innerHTML=value
		}
		
	function clearinput() {
	    var prefix='I Say: '
	    document.getElementById(\"center1\").innerHTML += (\"<p><b> I</b> Say: \"+document.getElementById(\"newmessage\").value+\"</p>\")
		document.getElementById(\"newmessage\").value=''
		}"
	)
%>

<%= periodically_call_remote :update => '',
	:condition => "document.getElementById(\"west\").innerHTML=='false'",
	:url => {:action => "msg_handler"},
	:frequency => 1.0,
	:after => "hold(true)",
	:complete =>"addText(request)" %>

<!-- <%= stylesheet_link_tag "/javascripts/yui/build/fonts/fonts-min.css" %> -->
	<link rel="stylesheet" type="text/css" href="http://www.yui-ext.com/deploy/yui-ext/resources/css/reset-min.css" /> 
	<link rel="stylesheet" type="text/css" href="http://www.yui-ext.com/deploy/yui-ext/resources/css/tabs.css"/>

	<link rel="stylesheet" type="text/css" href="http://www.yui-ext.com/deploy/yui-ext/resources/css/layout.css"/>
	<link rel="stylesheet" type="text/css" href="http://www.yui-ext.com/deploy/yui-ext/resources/css/grid.css"/>
	<link rel="stylesheet" type="text/css" href="http://www.yui-ext.com/deploy/yui-ext/resources/css/yui-ext.css"/>

	<!-- <script language="javascript" src="../grid/PropsGrid.js"></script> -->
	<style type="text/css">
	body {font:normal 9pt verdana; margin:0;padding:0;border:0px none;overflow:hidden;}
	.ylayout-panel-north {
		border:0px none;
		background-color:#c3daf9;
	}
	#nav {
	}
	#autoTabs, #center1, #center2, #west {
		padding:10px;
	}
	#north, #south{
		font:normal 8pt arial, helvetica;
		padding:4px;
	}
	.ylayout-panel-center p {
		margin:5px;
	}
	#props-panel .ygrid-col-0{
	}
	#props-panel .ygrid-col-1{
	}
	</style>
	
	<script type="text/javascript">
	Example = function(){
			var layout;
			return {
				init : function(){
				   layout = new YAHOO.ext.BorderLayout(document.body, {
						hideOnLayout: true,
						north: {
							split:false,
							initialSize: 25,
							titlebar: false
						},
						east: {
							split:true,
							initialSize: 202,
							minSize: 175,
							maxSize: 400,
							titlebar: true,
							collapsible: true,
							autoScroll:true,
							animate: true
						},
						south: {
							split:true,
							initialSize: 100,
							minSize: 100,
							maxSize: 200,
							titlebar: false,
							collapsible: true,
							autoScroll:true,
							animate: true
						},
						center: {
							titlebar: true,
							autoScroll:true
						}
					});
 
					layout.beginUpdate();
					layout.add('north', new YAHOO.ext.ContentPanel('north', 'North'));
					layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: true}));
					//layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'West'}));
					layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Roster', closable: true}));
					//layout.add('east', new YAHOO.ext.GridPanel(propsGrid, {title: 'Properties', closable: true}));
					layout.add('center', new YAHOO.ext.ContentPanel('center1', {title: 'About OIC 2.0', closable: true}));
					layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
					layout.getRegion('center').showPanel('center1');
					//layout.getRegion('west').hide();
					layout.endUpdate();
			   }
		 }

	}();
	YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
	
	
	var TreeTest = function(){
	// shorthand
	var Tree = YAHOO.ext.tree;

	return {
		init : function(){
			var tree = new Tree.TreePanel('autoTabs', {
				animate:true, 
				loader: new Tree.TreeLoader({dataUrl:'contact_tree'}),
				enableDD:true,
				containerScroll: true
			});

			// set the root node
			var root = new Tree.AsyncTreeNode({
				text: 'Contacts', 
				draggable:false, 
				id:'source'
			});
			tree.setRootNode(root);

			// render the tree
			tree.render();

			// false for not recursive (the default), false to disable animation
			root.expand();
		}
	};
	}();
	YAHOO.ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);
	</script>
	
	
</head>
<body>
<div id ="container">
  <div id="west" class="ylayout-inactive-content">false</div>
  <div id="north" class="ylayout-inactive-content">
	<table id='menubar'>
	<tr>
	<td align="left"><h1>Signed in as <%= @jid.to_s().split('.')[0] %></h1></td>
	<td align="right"><h1><%= link_to_remote "Logout", :url => { :action => "logout" } %></h1></td>
	</tr>
	</table>
  </div>
  <div id="autoTabs" class="ylayout-inactive-content">
  </div>
  <div id="center2" class="ylayout-inactive-content">
  </div>
  <div id="center1" class="ylayout-inactive-content">
  </div>
  </div>
  <div id="south" class="ylayout-inactive-content">
  <%= form_remote_tag :update => '', 
  :url => { :action => 'send_msg' },:after => "clearinput()" %>
<%= text_field_tag :newmessage, nil, {:size => "210x4", :maxlength => "1000",:autocomplete => "off"} %>
<%= end_form_tag %>
<!--  	<textarea style="width:100%; height=100%"> The cat was playing in the garden. </textarea> --> 
	
  </div>
</div>
 </body>
</html>
